<template>
    <div class="vote" >
      <swiper :options="swiperOption" ref="swiper">
        <swiper-slide>
           <vote-header></vote-header>
           <vote-list></vote-list>
        </swiper-slide>
        <swiper-slide>
          <vote-introduction></vote-introduction>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <vote-footer></vote-footer>
    </div>
</template>

<script>
import VoteIntroduction from './components/introduction'
import VoteHeader from './components/header'
import VoteList from './components/list'
import VoteFooter from './components/footer'
export default {
  name: 'vote',
  components: {
    VoteHeader,
    VoteList,
    VoteFooter,
    VoteIntroduction
  },
  data () {
    return {
      touchStatus: '',
      swiperOption: {
        pagination: '.swiper-pagination',
        autoplay: false,
        paginationClickable :true,
        // paginationType : 'fraction',
        // paginationBulletRender:(swiper, index, className) => {
        //   return '<span class="iconfont bottom1">' + '&#xe618;' + '</span>'
        // }
      }
    }
  },
  methods: {
    handleScroll (e) {
      // console.log(this.$refs)
      // alert('111')
      // console.log(window.screen.width)
      // console.log(e.touches)
    }
  },
  mounted () {
    //console.log(this.$refs.swiper.style)
    window.addEventListener('touchmove', this.handleScroll)
  },
  beforeDestory () {
    window.removeEventListener('touchmove', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
.vote >>> .swiper-container
  min-height: 20rem
.vote
     touch-action: none
.bottom1
    margin-left: 3rem
    color: #1296db
    font-size: .9rem
</style>
